<template>
	<div class="form">
		<div class="detail_box">
			<h3>该地区商家情况:</h3>
			<div>
				<p class="detail_row">
					<span class="title">目前商家总数</span>
					<span>{{pageData.busCount}}</span>
				</p>
				<p class="detail_row">
					<span class="title">今日商家发布总数</span>
					<span>{{pageData.issueTaskBusCount}}</span>
				</p>
				<p class="detail_row detail_row_last">
					<span class="title">今日新增商家总数</span>
					<span>{{pageData.newBusCount}}</span>
				</p>
			</div>			
		</div>	
		<div class="detail_box">
			<h3>该地区商家任务发布情况:</h3>			
			<div>
				<p class="detail_row">
					<span class="title">今日商家发布任务总条数</span>
					<span>{{pageData.issueAdCount}}</span>
				</p>
				<p class="detail_row detail_row_last">
					<span class="title">今日商家已接任务总数量</span>
					<span>{{pageData.acceptTaskCount}}</span>
				</p>
			</div>
		
		</div>	
		<div class="detail_box">
			<h3>该地区商家充值情况:</h3>			
			<div>
				<p class="detail_row">
					<span class="title">今日商家充值总额</span>
					<span>{{pageData.rechargeNumber}}</span>
				</p>
				<p class="detail_row detail_row_last">
					<span class="title">今日商家消耗总额</span>
					<span>{{pageData.consumeNumber}}</span>
				</p>
				<!--<p class="detail_row detail_row_last">
					<span class="title">本月商家充值总额</span>
					<span>{{}}</span>
				</p>-->
			</div>
		</div>	
				
	</div>
</template>

<script type="text/javascript">
	import {busStatistics} from '@/api/common'
	export default {
		created(){
			this.query();
		},
		methods: {					
			query(){											//查询
				busStatistics().then(res =>{
					console.log(res)
					this.pageData = res.data;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},						
		},
		data() {
			return {
				pageData:{
					acceptTaskCount: 0,					//商家已接任务数量
					busCount: 0,						//商家总数
					consumeNumber: 0,					//商家消费总额
					issueAdCount: 0,					//商家发布广告总条数
					issueTaskBusCount: 0,				//发布任务的商家数	
					newBusCount: 0,						//新增商家数
					rechargeNumber: 0					//商家充值总额
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.detail_box {
		margin-top: 30px;	
		width:50%
	}
	.detail_box div {
		border:1px solid #DDDDDD;
		margin-left: 100px;
	}
	.detail_box h3 {
		font-size: 24px;
		color:#6b91ce;
		font-weight: bold;
		margin: 10px 0;
	}
	.detail_box .detail_row {
		border-bottom: 1px solid #dddddd;
		font-size: 18px;
		color:#6b91ce;
		text-align: center;
		padding:0;
		margin: 0;
	}
	.detail_box .detail_row_last {
		border:0;		
	}
	.detail_box .detail_row span {
		display: inline-block;
		width:38%;
		padding: 10px;
	}
	.detail_box .detail_row .title {
		color:#333333;
		border-right: 1px solid #dddddd;
		width:60%;
	}
</style>